<template>
  <el-container class="questionlist">
    <el-main>
      <ul class="list-group list-group-flush">
        <router-link v-for="(v, key) in questions" :key="key" tag="li"
          class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" :to="{
          params: { ID: v.ID },
          query: $route.query,
        }">
          <span>{{ v.ID }} {{ v.name }}</span>
        </router-link>
      </ul>
    </el-main>
    <el-footer class="footer" height="45px">
      <el-pagination :page-size="limit" :total="getquestioncount" @current-change="change"
        layout="total, prev, pager, next, jumper" :current-page="Math.floor(offset / limit) + 1"></el-pagination>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { ElPagination } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import Studycodemodel from '../../../mysql_interface/studycodemodel';

type P = {
  questions?: Studycodemodel.Iquestion[],
  questionbankid?: number | string
  limit?: number
  offset?: number
  order?: keyof Studycodemodel.Iquestion
  change?: (val: number) => void
  getquestioncount?: number
}

const p = withDefaults(defineProps<P>(), {
  questions: [],
  limit: 20,
  offset: 0,
  order: 'ID',
  change: () => { },
  getquestioncount: 0
})

const router = useRouter()
const route = useRoute()
</script>

<style scoped>
.list-group-item {
  border: none;
  cursor: pointer;
  color: #32325d;
}

.questionlist {
  height: 100vh;
}

.router-link-active {
  background-color: var(--color-cheng);
  color: #fff;
}

.list-group-item:hover {
  background-color: var(--color-cheng);
  color: #fff;
}

.footer {
  padding-top: 5px;
}
</style>